
<template>
    <button :style="{width:width+'px',height:height+'px'}" :disabled="disabled" @click="clickBtn">
        <slot></slot>
    </button>
</template>

<script>
export default {
	data() {
		return {}
	},
	props: {
		width: {
			type: Number,
			default() {
				return 80
			}
		},
		height: {
			type: Number,
			default() {
				return 32
			}
		},
		disabled: {
			type: Boolean,
			default() {
				return false
			}
		}
	},
	methods: {
		clickBtn(e) {
			this.$emit('handleClick', e)
		}
	}
}
</script>

<style scoped>
button {
	font-size: 15px;
	color: #474747;
	opacity: 1;
	background: #fff;
	border: 1px solid #b1b1b1;
	border-radius: 4px;
	box-sizing: border-box;
	cursor: pointer;
}

button:hover {
	background: #3897fc;
}

button:active {
	background: #1785fa;
}

button:disabled {
	background: #b7b7b8;
	cursor: not-allowed;
}
</style>
